
<!doctype html>

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  </head>
  <body>
<script src="../vendor/jquery.js"></script>
<script src="../vendor/jquery.webcam.js"></script>

        <script type="text/javascript">
    var image = new Array();
    var ctx = null;
    var pos = 0;
    var w = 320;
    var h= 240;
$(document).ready(function() {
     $("#webcam").webcam({
    width: 320,
    height: 240,
    mode: "callback",
    swffile: "../vendor/jscam.swf",
    onTick: function(remain) {
      if (0 ==remain) {jQuery("#status").text("Cheese!");
   } else {jQuery("#status").text(remain+ " seconds remaining...");
     }
    },
    onSave: function(data) {
        image.push(data);
        pos += 4 * w;
                if (pos == 4 * w * h) {
                    $.post("CamPost.ashx", {w: w, h: h , pix:image.join('|'),planid:$("#planid").val(),examkey:$("#examkey").val()},function(msg) {
                                $("#flash").attr('src', msg);
                                pos = 0;
                                image = new Array();
                            });
                        }
    },
    onCapture: function () {  webcam.save();},
    onLoad: function () {
        var cams = webcam.getCameraList();
       webcam.capture();
        for(var i in cams) {
            jQuery("#cams").append("<li>" + cams[i] + "</li>");
        }
    }
});
window.setInterval( "webcam.capture()",600000);

$("#camState").click(function(){
if($("#camBox").css("display")=="block")
{
    $("#camState").text("显示画面");
    $("#cam").css("border","none");
    $("#camBox").css("display","none");

}
else if($("#camBox").css("display")=="none")
{
    $("#camState").text("隐藏画面");
    $("#cam").css("border","solid 2px #000");
    $("#camBox").css("display","block");
  }

});
});
        </script>

        <div id="cam" style="position: fixed; z-index: 300; width: 320px; height: 240px;
            right: 0px; top: 0px; border: solid 2px #000;">
            <div id="camBox">
                <div id="webcam">
                </div>
                <div id="status"> </div>
            </div>
            <div id="camState" style="cursor: pointer; background-color: Red; color: White; width: 50px;">
                隐藏画面</div>
        </div>
      </body>
      </html>
